import React from 'react';
import { Form, Input, Switch } from 'antd';
import type { FormInstance } from 'antd/es/form';

interface BasicInfoStepProps {
  form: FormInstance;
}

const BasicInfoStep: React.FC<BasicInfoStepProps> = () => {
  return (
    <div>
      <Form.Item
        name={['basicInfo', 'name']}
        label="规则名称"
        rules={[
          { required: true, message: '请输入规则名称' },
          { max: 50, message: '规则名称不能超过50个字符' },
        ]}
      >
        <Input placeholder="请输入规则名称" />
      </Form.Item>

      <Form.Item
        name={['basicInfo', 'description']}
        label="规则描述"
        rules={[
          { max: 200, message: '规则描述不能超过200个字符' },
        ]}
      >
        <Input.TextArea 
          rows={3} 
          placeholder="请输入规则描述（可选）"
          showCount
          maxLength={200}
        />
      </Form.Item>

      <Form.Item
        name={['basicInfo', 'status']}
        label="规则状态"
        valuePropName="checked"
        getValueFromEvent={(checked) => checked ? 'active' : 'disabled'}
        getValueProps={(value) => ({ checked: value === 'active' })}
        initialValue="disabled"
      >
        <Switch 
          checkedChildren="启用" 
          unCheckedChildren="禁用"
        />
      </Form.Item>
    </div>
  );
};

export default BasicInfoStep;